<template>
  <b-col cols="12" lg="6" class="mb-3"  >
    <div class="my-card py-3">
      <b-row class="mx-1">
        <b-col cols="12" class="text-center mb-1">
          <h5>修改头像</h5>
        </b-col>
        <b-col cols="4" class="text-center px-0">
          <b-avatar size="100px" :src="showImg"  :variant="cavatarcolor"></b-avatar>
        </b-col>
        <b-col cols="8" class="">
          <b-form-file
              class="mx-0 my-2"
              name="选择"
              v-model="file"
              :state="Boolean(file)"
              placeholder="选择一个文件..."
              drop-placeholder="拖拽到这..."
              browse-text="选择图片"
              accept=".jpg, .png, .gif, .jpeg"
          ></b-form-file>

          <b-dropdown text="选择头像框的颜色" :variant="cavatarcolor" >
            <b-dropdown-item-btn
                :class="'bg-'+vas.va"
                :variant="vas.va"
                v-for="vas in variants"
                @click="changeColor(vas.va)"
            >{{vas.cn}}</b-dropdown-item-btn>
          </b-dropdown>

        </b-col>
        <b-col cols="12" class="mt-3 text-center">
          <b-button class="mr-5 px-5" variant="primary" @click="submit">确定</b-button>
          <b-button class="px-5" @click="$emit('dismiss')">取消</b-button>
        </b-col>
      </b-row>
    </div>
  </b-col>
</template>

<script>
  import urlconfig from "../urlconfig";

  export default {
    name: "UpdateAvatar",
    data(){
      return  {
        file: null,
        cavatarcolor: 'secondary',
        variants: [
          {va: 'primary', cn: '蓝'},
          {va: 'secondary',cn:'灰'},
          {va: 'success',cn:'绿'},
          {va: 'danger',cn:'红'},
          {va: 'warning',cn:'黄'},
          {va: 'info',cn:'碧'},
          {va: 'light',cn:'白'},
          {va: 'dark',cn:'黑'},
        ],
        avatarTemp: null, // temp img url
      }
    },
    methods:{
      submit(){
        if (Boolean(this.file)){
          if (this.file.size > urlconfig.maxSize*1024*1024){
            this.$emit('onmsg',"图片大小不得超过"+urlconfig.maxSize+"MB！",false)
            this.file = null
            return
          }
          let form = new FormData()
          form.append('file',this.file)
          let url = '/file/upload/avatar/'+this.cavatarcolor
          // console.log(url);
          this.$ajax.post(url,form,{
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then(resp=>{
            let data = resp.data
            if (data.code === 200) {
              this.$store.commit("setAvatar", data.data)
              this.$emit('onmsg',data.msg)
              this.$emit('dismiss')

            }else{
              this.$emit('onmsg',data.msg,false)
            }
          }).catch((err=>{
            console.log(err)
            this.$emit('onmsg',"请求失败，请重试！",false)
          }))
        }else{
          this.$emit('onmsg','请先选择文件!',false)
        }


      },
      changeColor(va){
        this.cavatarcolor = va
      },

    },
    computed:{
      showImg(){

        //将 input 得到的 img转换成url给src
        if (Boolean(this.file)){
          let reader = new FileReader()
          reader.onload = ev => {
            this.avatarTemp = ev.target.result
          }
          reader.readAsDataURL(this.file)

        }

        return this.avatarTemp
      },
    }
  }
</script>

<style scoped>
  .my-card {
    background: #ffffff;
    border-radius: 5px;
    box-shadow: #6e6e6e 1px 1px 5px;
  }
</style>